<template>
	<view class="applications">
		<uni-swiper-dot class="applications-swiper-box-dot" @clickItem="clickItem" :info="list" :current="current"
			:mode="mode" :dots-styles="list.length == 1 ? dotsStyles : defaultDotsStyles">
			<swiper class="applications-swiper" @change="handleChange" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in list" :key="index">
					<scroll-view scroll-y="true" class="applications-swiper-box" :refresher-enabled="isOpenRefresh"
						:refresher-triggered="triggered" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
						@refresherrestore="onRestore" @scroll="onScroll">
						<view style="padding: 25rpx 25rpx 0;">
							<template v-if="index == swiperDotIndex && isRefresh">
								<view style="margin-bottom: 10rpx;">
									<NoticeView v-if="index == 0" />
								</view>
								<view style="margin-bottom: 30rpx;">
									<SwiperView :main-model="item" v-if="item.carouselPictureId" />
								</view>
								<view style="margin-bottom: 30rpx;">
									<CardView :main-model="item" />
								</view>
								<view style="margin-bottom: 30rpx;">
									<ToDoView v-if="index == 0" />
								</view>
								<view style="margin-bottom: 30rpx;">
									<ApplicationView />
								</view>
							</template>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>
<script setup>
	import {
		postAction
	} from "@/utils/request";
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import NoticeView from './modules/NoticeView.vue';
	import SwiperView from './modules/SwiperView.vue';
	import CardView from './modules/CardView.vue';
	import ApplicationView from './modules/ApplicationView.vue';
	import ToDoView from './modules/ToDoView.vue';

	const defaultDotsStyles = {
		backgroundColor: '#bbb',
		selectedBackgroundColor: '#eee',
		selectedBorder: 'none',
		selectedBorder: 'none',
	}

	const dotsStyles = {
		backgroundColor: 'transparent',
		selectedBackgroundColor: 'transparent',
		selectedBorder: 'none',
		selectedBorder: 'none',
	}

	const current = ref(0)
	const swiperDotIndex = ref(0)
	const mode = 'round'
	const isRefresh = ref(true)


	const list = ref([])
	const init = async () => {
		const res = await postAction('/portal/listPortalByMobile', {})
		list.value = res?.data || []
	}
	const fetch = () => {
		init()
	}
	onMounted(fetch)

	const isOpenRefresh = ref(true)
	const triggered = ref(false)
	const curRefresh = ref(false)
	const scrollTop = ref(0)
	const onScroll = (e) => {
		scrollTop.value = e.detail.scrollTop
	}
	// 自定义下拉刷新控件被下拉
	const onPulling = (e) => {
		if (e.detail.dy < 0) return // 防止上滑页面也触发下拉
		triggered.value = true;
	}
	// 自定义下拉刷新被触发
	const onRefresh = () => {
		if (scrollTop.value === 0) {
			if (curRefresh.value) return
			curRefresh.value = true
			setTimeout(() => {
				triggered.value = false;
				curRefresh.value = false
				search()
			}, 500);
		}
	}
	// 自定义下拉刷新被复位
	const onRestore = () => {
		triggered.value = false; // 需要重置
	}
	const search = () => {
		isRefresh.value = false
		setTimeout(() => {
			isRefresh.value = true
		}, 500)
	}
	// onShow(() => {
	// })

	const clickItem = (e) => {
		current.value = e;
		swiperDotIndex.value = e
	}
	const handleChange = (e) => {
		swiperDotIndex.value = e.detail.current
		current.value = e.detail.current;
	}
</script>
<style>
	page {
		background-color: #f6f8fe;
		height: 100%;
		overflow: hidden;
	}
</style>
<style lang="scss" scoped>
	.applications {
		height: 100vh;
		overflow: hidden;
	}

	::v-deep .uni-swiper__warp {
		height: 100%;
	}

	.applications>.uni-swiper__warp> ::v-deep .uni-swiper__dots-box {
		bottom: 50rpx !important;
		/* #ifdef H5 */
		bottom: 230rpx !important;
		/* #endif */
	}

	.applications-swiper {
		height: 100%;
	}

	.applications-swiper-box {
		height: calc(100vh - 25rpx);
		/* #ifdef H5 */
		height: calc(100vh - 245rpx);
		/* #endif */
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}
</style>